<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="课程logo">
      <!-- <el-input v-model="form.name"></el-input> -->

      <el-upload
        class="upload-demo"
        ref="upload"
        action="/api/updateFile/uploadFilePhoto"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
        list-type="picture"
      >
        <el-button slot="trigger" size="small" type="file">选取文件</el-button>
        <el-button
          style="margin-left: 10px;"
          size="small"
          type="success"
          @click="submitUpload"
        >上传到服务器</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
    </el-form-item>

    <el-form-item label="课程名称">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="课程价格">
      <el-input v-model="form.region"></el-input>
    </el-form-item>
    <el-form-item label="课程教师">
      <el-input v-model="form.region"></el-input>
    </el-form-item>
    <el-form-item label="目标人群">
      <el-input v-model="form.region"></el-input>
    </el-form-item>
    <el-form-item label="视频类别">
      <el-select v-model="form.region" placeholder="请选择视频类别">
        <!-- <el-option label="区域一" value="shanghai"></el-option> -->
        <!-- <el-option label="区域二" value="beijing"></el-option> -->
      </el-select>
    </el-form-item>

    <el-form-item label="课程简介">
      <el-input type="textarea" v-model="form.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import { mapGetters } from "vuex";
import {uploadFilePhoto} from '@/api/course/uploadFilePhoto'

export default {
  name: "period",
  data() {
    return {
      fileList: [],
      form: "",
      name: "",
      region: "",
      date1: "",
      date2: "",
      delivery: false,
      type: [],
      resource: "",
      desc: "",
      files: ""
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
      if (this.$refs.upload.files.length !== 0) {
        var image = new FormData();
        // image.append("uploadFilePhoto", this.$refs.data.files[0]);
        // this.axios.post("/course/uploadFilePhoto", image, {
        //   headers: {
            // "Content-Type": "multipart/form-data"
        //   }
        // });
      }
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },

    onSubmit() {
      const h = this.$createElement;
      this.$msgbox({
        title: "消息",
        message: h("p", null, [
          h("span", null, "确定 "),
          h("i", { style: "color: teal" }, "提交?")
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 3000);
          } else {
            done();
          }
        }
      }).then(action => {
        this.$message({
          type: "info",
          message: "action: " + action
        });
      });
    }
  }
};
</script>